<template>
  <div style="padding: 15px;">
    <el-container >
      <el-header >
        <el-row>
          <el-button @click="findGetList">查询</el-button>
          <el-button @click="funcAdd">新增</el-button>
          <el-button @click="start">启用</el-button>
          <el-button @click="block">停用</el-button>
          <el-button @click="upload">导入</el-button>
          <el-button @click="vessel">商品条码打印</el-button>
        </el-row>
      </el-header>
      <el-container>
        <el-aside  >
           商品分类
          <span style="margin-left:30px">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              circle
              title="编辑"
              @click="edit"
            ></el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              circle
              @click="append"
              title="增加"
            ></el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-minus"
              circle
              @click="remove"
              title="删除"
            ></el-button>
          </span>

          <el-form ref="form" label-width="60px">
            <el-row>
              <el-col :span="20">
                <div class="grid-content bg-purple">
                  <el-form-item  label="入驻商" prop="shipmentCode">
                    <shipmentSelect ref="shipmentSelect" url="/wms/warehouseShipment/business/shipments"  @setCustomerCode="setCustomerCode" style="width: 100%"/>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        <div>
          <el-tree
            ref="tree"
            :props="props"
            :data="treeData"
            node-key="value"
            :expand-on-click-node="false"
            default-expand-all
            highlight-current
          >
            <div class="custom-tree-node" slot-scope="{ node,data }"  @click="getCode(data)" style="width:100%">
              <div >{{ node.label }}</div>
            </div>
          </el-tree>
        </div>
        </el-aside>
        <el-main  style="padding: 0;">
          <vxe-toolbar export :refresh="{query: findList}">
          </vxe-toolbar>
          <vxe-table
            ref="xTable"
            border
            resizable
            stripe
            highlight-current-row
            :align="allAlign"
            show-footer
            highlight-hover-row
            row-id="id"
            class="mytable-footer"
            height="700"
            export-config
            :loading="loading"
            :data="tableData"
            :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
            sort-config.remote
            @sort-change="sortList"
            :seq-config="{startIndex: listQuery.pageNum * listQuery.pageSize - listQuery.pageSize}"
          >
            <vxe-table-column type="seq" width="60"></vxe-table-column>
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="status" title="状态" min-width="100" sortable show-header-overflow show-overflow
                                :formatter="formatterStatus"/>
              <template v-slot:header="{ column }">
                <el-select v-model="listQuery.status" placeholder="请选择状态" clearable>
                  <el-option value="0" label="启用"/>
                  <el-option value="1" label="停用"/>
                </el-select>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="typeText" title="商品分类" min-width="150" sortable show-header-overflow show-overflow/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.typeName" placeholder="请输入商品分类" clearable  style="width: 100%"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="name" title="商品名称" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.name" placeholder="请输入商品名称" clearable  style="width: 100%"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="goodCode" title="商品编码" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.goodCode" placeholder="请输入商品编码" clearable  style="width: 100%"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="barCode" title="商品条码" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.barCode" placeholder="请输入商品条码" clearable  style="width: 100%"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="unitName" title="基本单位" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-select v-model="listQuery.unitName" placeholder="请选择基本单位" clearable style="width:100%" @change='getUnitCode($event)'>
                  <el-option
                    v-for="item in unitList"
                    :key="item.code"
                    :label="item.unitName"
                    :value="item.code"
                  />
                </el-select>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="spec" title="规格" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.spec" placeholder="请输入规格" clearable  style="width: 100%"/>
              </template>
            </vxe-table-column>

            <vxe-table-column>
              <vxe-table-column field="lotRule" title="批次规则" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-select v-model="listQuery.lotNumberName" placeholder="请选择批次规则" clearable style="width:100%" @change='getBatchInfo($event)'>
                  <el-option
                    v-for="item in batchRuleList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </template>
            </vxe-table-column>

            <vxe-table-column>
              <vxe-table-column field="quality" title="保质期（天）" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.quality" placeholder="请输入保质期（天）" type='number' style="width:100%;"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="earlyWarning" title="临期预警（天）" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.earlyWarning" placeholder="请输入临期预警（天）"  type='number' style="width:100%;"/>
              </template>
            </vxe-table-column>

            <vxe-table-column>
              <vxe-table-column field="receivingWarning" title="收货预警（天）" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.receivingWarning" placeholder="请输入收货预警（天）"  type='number' style="width:100%;"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="sendWarning" title="发货预警（天）" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.sendWarning" placeholder="请输入发货预警（天）"  type='number' style="width:100%;"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="storageStrategyText" title="混放策略" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-select v-model="listQuery.storageStrategy" placeholder="请选择混放策略 " style="width:100%" clearable>
                  <el-option
                    v-for="item in storageStrategyTypeData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </template>
            </vxe-table-column>

            <vxe-table-column>
              <vxe-table-column field="createdName" title="创建人" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.createdName" placeholder="请输入创建人" clearable  style="width: 100%"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column
                field="gmtCreated"
                show-header-overflow
                show-overflow
                title="创建时间"
                min-width="420"
                sortable
                :resizable="false"
              />
              <template v-slot:header>
                <el-date-picker
                  v-model="gmtCreatedRange"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  style="width:100%"
            range-separator="至"

                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="value => changeDate(value, 'gmtCreated')"
                />
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="modifiedName" title="修改人" min-width="150" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.modifiedName" placeholder="请输入修改人" clearable  style="width: 100%"/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column
                field="gmtModified"
                show-header-overflow
                show-overflow
                title="修改时间"
                min-width="420"
                sortable
                :resizable="false"
              />
              <template v-slot:header>
                <el-date-picker
                  v-model="gmtModifiedRange"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  style="width:100%"
            range-separator="至"

                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="value => changeDate(value, 'gmtModified')"
                />
              </template>
            </vxe-table-column>
            <vxe-table-column title="操作" fixed="right" min-width="150">
              <template slot-scope="scope">
                <el-tooltip  effect="dark" content="详情" placement="top">
                  <vxe-button type="text" @click="funcDetail(scope.row.code)">
                    <i class="el-icon-document"/>
                  </vxe-button>
                </el-tooltip>
                <el-tooltip  effect="dark" content="编辑" placement="top">
                  <vxe-button type="text" @click="funcEdit(scope.row.code)">
                    <i class="el-icon-edit"/>
                  </vxe-button>
                </el-tooltip>
                <el-tooltip  effect="dark" content="删除" placement="top">
                  <vxe-button type="text" @click="funcDelete(scope.row.code)">
                    <i class="el-icon-delete"/>
                  </vxe-button>
                </el-tooltip>

              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :loading="loading"
            :current-page.sync="listQuery.pageNum"
            :page-size.sync="listQuery.pageSize"
            :total="listQuery.total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
            @page-change="handlePageChange"
          />
          <vxe-modal v-model="vesselShow" title="打印商品条码" :show-zoom="false" destroy-on-close resize>
            <barCode :vesselList="vesselList" />
          </vxe-modal>
          <vxe-modal v-model="modelAddFlag" title="新增" width="1100" height="1000" destroy-on-close resize>
            <compAdd ref="addRef" @fatherAddMethod="fatherAdd" @fatherCancelMethod="fatherCancel" :operationCode="operationCode" />
          </vxe-modal>
          <vxe-modal v-model="modelItemAddFlag" title="新增商品分类" width="700" height="400" destroy-on-close resize>
            <compItemAdd ref="addItemRef" @fatherItemAddMethod="fatherItemAdd" :operationShipmentCode="operationShipmentCode" :operationCode="operationCode"/>
          </vxe-modal>
          <vxe-modal v-model="modelItemEditFlag" title="修改商品分类" width="700" height="400" destroy-on-close resize>
            <compItemEdit ref="editItemRef" @fatherItemEditMethod="fatherItemEdit" :operationCode="operationCode" />
          </vxe-modal>
          <vxe-modal v-model="modelEditFlag" title="编辑" width="1100" height="1000" destroy-on-close resize>
            <compEdit ref="editRef" @fatherEditMethod="fatherEdit" @fatherCancelMethod="fatherCancel" :operationTypeCode="operationTypeCode"/>
          </vxe-modal>
          <vxe-modal v-model="modelDetailFlag" title="详情" width="1100" height="1000" destroy-on-close resize>
            <compDetail ref="detailRef" :operationTypeCode="operationTypeCode" />
          </vxe-modal>
         <vxe-modal v-model="modelUploadFlag" title="导入" width="1300" height="900" destroy-on-close>
          <dataImport type="goodsManage" @importFileSuccess="importFileSuccess" />
        </vxe-modal>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  Vue.use(VXETable, VXEUtils, XEUtils, {mounts: ['cookie']})
  import compAdd from './components/goodsAdd.vue'
  import compItemAdd from './components/itemAdd.vue'
  import compItemEdit from './components/itemEdit.vue'
  import compEdit from './components/goodsEdit.vue'
  import compDetail from './components/goodsDetail.vue'
  import {goodsList, goodsActive, goodsUnActive,findBatchRuleByShipmentCode,findUnitByShipmentCode, goodsDelete,findByShipmentCode,deleteGoodsType,goodsTypeCanAdd} from '@/api/basicInfo'
  import shipmentSelect from '@/views/components/shipmentSelect.vue'
  import dataImport from '@/views/components/importFile'
  import barCode from "@/views/components/barCode"
  export default {
    name: 'Parent',
    components: {
      compAdd,
      compEdit,
      compDetail,
      shipmentSelect,
      compItemAdd,
      compItemEdit,
      barCode,
      dataImport
    },
    data() {
      return {
        message: '',
        // 日期选项
          pickerOptions: {
              shortcuts: [
                  {
                      text: '最近一周',
                      onClick(picker) {
                          const end = new Date()
                          const start = new Date()
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                          picker.$emit('pick', [start, end])
                      }
                  },
                  {
                      text: '最近一个月',
                      onClick(picker) {
                          const end = new Date()
                          const start = new Date()
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                          picker.$emit('pick', [start, end])
                      }
                  },
                  {
                      text: '最近三个月',
                      onClick(picker) {
                          const end = new Date()
                          const start = new Date()
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                          picker.$emit('pick', [start, end])
                      }
                  }
              ]
          },
        loading: false,
        allAlign: 'center',
        tableData: [],
          goodsUnitList:[],
          unitList:[],
          batchRuleList:[],
          storageStrategyTypeData:[   //混放策略列表
              { code: "0", name: "商品混放" },
              { code: "1",name: "批次混放" },
              { code: "2",name: "混放" },
              { code: "3",name: "不混放" },
          ],
          modelAddFlag: false,
        parentName:'',
        parentCode:'',
        level:'',
        treeData: [
          {
            label:'全部',
            level: 0,
            value: "0",
            children:[]
          }
        ],
        props: {
          label: 'label',
          children: 'children',
          sort:'sort'
        },
        modelItemEditFlag: false,
        modelItemAddFlag: false,
        modelbindingFlag: false,
        modelEditFlag: false,
        modelDetailFlag: false,
          modelUploadFlag:false,
          gmtCreatedRange:"",
          gmtModifiedRange:"",
        copy: false,
        shipmentCode:'',
        listQuery: {
          total: 0,             //总数
            lotNumberName:'',
          createdBy: '',         //创建人
          modifiedBy: '',        //修改人
          gmtCreated: '',        //创建时间
          gmtModified: '',       //修改时间
          auxiliaryUnitCode: '',       //辅助单位 ,
          barCode: '',                 //商品条码 ,
          brandCode: '',               //品牌code ,
          code: '',                    //数据标识 ,
          convertedQuantity: '',       //换算数量 ,
          earlyWarning: '',            //临期预警 ,
          gmt_created: '',             //创建时间 ,
          goodCode: '',                //商品编码 ,
          isDeleted: '',               //删除标识 ,
          isLotNumber: '',             //是否启用批次号 ,
          lotNumber: '',               //批号 ,
          storageStrategy: '',
          storageStrategyText: '',
          maxStock: '',                //最高库存量预警 ,
          miniStock: '',               //最低库存量预警 ,
          mnemonic: '',                //助记符 ,
          multiple: '',                //补货倍数 ,
          name: '',                    //商品名称 ,
          partyGroupCode: '',          //所属机构 ,
          quality: '',                 //保质期 ,
          receivingWarning: '',        //收货预警 ,
          sendWarning: '',             //发货预警 ,
          shipmentCode: '',            //所属入驻商 ,
          shipmentName: '',
          typeName:'',
          spec: '',                    //规格 ,
          status: '',                  //状态 ,
          stockType: '',               //库存类型 ,
          typeCode: '0',                //商品类型 ,
          unitCode: '',                //单位code ,
            unitName: '',                //单位code ,
            lotRule:'',
          unitPrecision: '',           //单位精度 ,
          volume: '',                  //体积 ,
          weight: '',                  //重量
          pageNum: 1,
          pageSize: 10,
          sortField: '',
          sortType: '',
        },
        operationCode:[],  //添加所需 typecode
        operationShipmentCode:[], //添加所需 ShipmentCode
        operationTypeCode:[],  //编辑所需  code
        vesselList: [],
        vesselShow: false
      }
    },
    created() {
      // this.findList()
        //getUnit();
    },
    methods: {
      //商品类型过滤
      getCode(data){
        this.listQuery.typeCode = data.value;
        this.parentName = data.label
        this.parentCode = data.value
        this.level = data.level + 1
        // this.findList()
        this.findGetList()
      },
      getUnit(){
        findUnitByShipmentCode(this.listQuery.shipmentCode).then(response => {
            this.unitList = response.data
        })
      },
      getBatchRule(){
        findBatchRuleByShipmentCode(this.listQuery.shipmentCode).then(response => {
            this.batchRuleList = response.data
        })
      },
      getUnitCode(e){
          if(e != undefined && e != "") {
            // 不为空时获取对应的数据
            const sd = this.unitList.find(i => i.code == e)
            this.listQuery.unitCode = sd.code
            this.listQuery.unitName = sd.unitName
          }else{
            this.listQuery.unitCode = ""
            this.listQuery.unitName = ""
          }
      },
      getBatchInfo(e){
        if(e != undefined && e != "") {
          // 不为空时获取对应的数据
          const sd = this.batchRuleList.find(i => i.code == e)
          this.listQuery.lotNumber = sd.code
          this.listQuery.lotNumberName = sd.code
        }else{
          this.listQuery.lotNumber = ""
          this.listQuery.lotNumberName = ""
        }
      },
      // 选择入驻商
      setCustomerCode(value) {
        this.listQuery.shipmentCode = value;
      },
      upload(){
          this.modelUploadFlag = true;
      },
      importFileSuccess(){
          this.modelUploadFlag = false;
          this.findList();
      },
      //启用
      start() {
        let selectRecords = this.$refs.xTable.getCheckboxRecords()
        let arr = []
        selectRecords.forEach(i => {
          arr.push(i.code)
        })
        arr = arr.join(",");
        if (arr.length != 0) {
          this.$confirm('确认启用吗？').then(_ => {
            this.loading = true
            goodsActive(arr).then(response => {
              this.$message({message: response.msg, type: 'success'})
              this.findList()
              this.loading = false
            })
          })
        } else {
          this.$message('没有能启用的数据！')
        }
      },
        changeDate(value, prefix) {
            if (value) {
                this.listQuery[`${prefix}Start`] = value[0] + " 00:00:00";
                this.listQuery[`${prefix}End`] = value[1] + " 23:59:59";
            } else {
                this.listQuery[`${prefix}Start`] = "";
                this.listQuery[`${prefix}End`] = "";
            }
        },
      //类型删除
      remove(){
        if(this.listQuery.typeCode !== '0'){
          this.$confirm('确认删除吗？').then(_ => {
            deleteGoodsType(this.listQuery.typeCode).then(response => {
              this.$message({message: response.msg, type: 'success'})
              this.listQuery.typeCode = '0'
              this.findGetList()
            })
          })
        }else{
          this.$message('没有能删除的数据！')
        }
      },
      //停用
      block() {
        let selectRecords = this.$refs.xTable.getCheckboxRecords()
        let arr = []
        selectRecords.forEach(i => {
          arr.push(i.code)
        })
        arr = arr.join(",");
        if (arr.length != 0) {
          this.$confirm('确认停用吗？').then(_ => {
            this.loading = true
            goodsUnActive(arr).then(response => {
                this.$message({ dangerouslyUseHTMLString: true,message: response.msg, type: 'success'})
              this.findList()
              this.loading = false
            })
          }).catch(_ => {
          })
        } else {
          this.$message('没有能停用的数据！')
        }
      },
      // 翻译状态
      formatterStatus({cellValue}) {
        if (cellValue === '0') {
          return '启用'
        } else if (cellValue === '1') {
          return '停用'
        }
      },
      // 条形码
      vessel(){
        let selectRecords = this.$refs.xTable.getCheckboxRecords()
        let arr = []
        selectRecords.forEach(i => {
          arr.push(i.barCode)
        })
        if(arr.length != 0){
          this.vesselList = arr
          this.vesselShow = true
        }else {
          this.$message("请选择单据进行商品条码打印")
        }
      },
        //计算基本单位
        nameChangeEvent (row) {
            const sd = this.goodsUnitList.find(i => i.unitName == row.unitName)
            row.unitCode = sd.code
            row.unitNum = sd.unitCode
        },
      //查询
      findGetList() {
        if(this.listQuery.shipmentCode){
          this.findList()
          this.loadTreeData()
            this.getUnit()
            this.getBatchRule()
        }else{
          this.$message.error('入驻商不能为空')
        }

      },
      //获取列表
      findList(){
      return new Promise((resolve) => {
        if(this.listQuery.shipmentCode){
          this.loading = true
          goodsList(this.listQuery).then(response => {
            this.tableData = response.data.records
            this.listQuery.total = response.data.total
            this.loading = false
            resolve()
          })
        }else{
          this.$message('入驻商不能为空')
          resolve()
        }
      })


      },
      //获取商品分类
      loadTreeData() {
        findByShipmentCode(this.listQuery.shipmentCode).then(response => {
          this.treeData[0].children = response.data;
        })
      },

      // 排序
      sortList({column, property, order}) {
        if (order) {
          this.listQuery.sortField = property
          this.listQuery.sortType = order
        } else {
          this.listQuery.sortField = ''
        }
        this.findList()
      },
      // 添加方法
      funcAdd() {
        // this.$refs.addRef.reset();    //重置
        if(this.listQuery.shipmentCode && this.listQuery.typeCode !== '0'){
          let canAdd = ''
          goodsTypeCanAdd(this.listQuery.typeCode, 1).then(response => {
            canAdd = response.data.canAdd
            if(canAdd){
              // this.$refs.addRef.getInfo(this.listQuery.typeCode)
              this.operationCode = this.listQuery.typeCode
              this.modelAddFlag = true
            }else{
              this.$message('该类型不可新增')
            }

        })

        }else{
          this.$message('请选择除全部外的商品类型！')
        }

      },
      append(){
        if(this.listQuery.shipmentCode){
          let canAdd = ''
          goodsTypeCanAdd(this.listQuery.typeCode, 0).then(response => {
            canAdd = response.data.canAdd
            if(canAdd){
              this.operationCode = this.listQuery.typeCode
              this.operationShipmentCode = this.listQuery.shipmentCode
              this.modelItemAddFlag = true
            }else{
              this.$message('该类型不可新增')
            }

        })

        }else{
          this.$message('请选择入驻商！')
        }

      },
      edit(){
        if(this.listQuery.shipmentCode && this.listQuery.typeCode !== '0'){
          this.operationCode = this.listQuery.typeCode
          this.modelItemEditFlag = true
        }else{
          this.$message('请选择除全部外的商品类型！')
        }

      },
      // 修改方法
      funcEdit(code) {
        this.operationTypeCode = code
        this.modelEditFlag = true
      },
      // 详情方法
      funcDetail(code) {
        this.operationTypeCode = code
        this.modelDetailFlag = true
      },
      // 删除方法
      funcDelete(row) {
        this.$confirm('确认删除吗？').then(_ => {
          goodsDelete(row).then(response => {
              this.$message({ dangerouslyUseHTMLString: true,message: response.msg, type: 'success'})
            this.findList()
          })
        }).catch(_ => {
        })
      },
      // 增加组件的父方法
      fatherAdd() {
        this.modelAddFlag = false
        this.findList()
      },
      fatherItemAdd() {
        this.modelItemAddFlag = false
        this.findGetList()
      },
      fatherItemEdit() {
        this.modelItemEditFlag = false
        this.findGetList()
      },

      // 编辑组件的父方法
      fatherEdit() {
        this.modelEditFlag = false
        this.findList()
      },
      // 公共取消
      fatherCancel(modelFlag) {
        switch (modelFlag) {
          case 'add':
            this.modelAddFlag = false
            break
          case 'edit':
            this.modelEditFlag = false
            break
          case 'detail':
            this.modelDetailFlag = false
            break
          default:
        }
      },
      // 分页handle
      handlePageChange({currentPage, pageSize}) {
        this.listQuery.pageNum = currentPage
        this.listQuery.pageSize = pageSize
        this.findList()
      },
      // 底部颜色设置
      /*  footerCellClassName({ $rowIndex, column, columnIndex }) {
         if (columnIndex === 0) {
           if ($rowIndex === 0) {
             return 'col-blue'
           } else {
             return 'col-red'
           }
         }
       }, */
      // 设置底部合计
      footerMethod({columns, data}) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 0) {
              return '合计'
            }
            if (['pageviews', 'forecast'].includes(column.property)) {
              return XEUtils.sum(data, column.property)
            }
            return null
          })
        ]
      }
    }
  }
</script>

<style scoped>
  .vxe-table .vxe-body--column:not(.col--ellipsis),
  .vxe-table .vxe-footer--column:not(.col--ellipsis),
  .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .container{
    display: flex;
    flex-direction: column;
  }
  .vxe-toolbar {
    padding: 0 0 10px 0
  }
  .el-input {
    width: 120px;
  }
  .vxe-toolbar{
    position: absolute;
    right: 20px;
    top: 15px;
  }
</style>
